<template>
  <!-- 登录页面的布局 -->
  <div class="login-container">

    <!-- 登录表单的容器 -->
    <div style="display: flex;
    background-color: rgba(245, 245, 245, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(200, 200, 200, 0.3);
    width: 50%; border-radius: 10px; overflow: hidden">

      <!-- 左侧图片 -->
      <div style="flex: 1; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center">
        <img src="@/assets/logo/login-logo.png" alt=""
             style="width: 100%; object-fit: contain; max-height: 100%">
      </div>

      <!-- 登录表单 -->
      <div style="flex: 1; display: flex; align-items: center; justify-content: center">
        <el-form style="width: 80%"
                 :model="user" :rules="rules" ref="loginRef">
          <!-- 登录标题 -->
          <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">
            欢 迎 登 录
          </div>

          <!-- 输入框 -->
          <el-form-item prop="username" class="input1">
            <el-input prefix-icon="el-icon-user" size="big" placeholder="请输入账号"
                      v-model="user.username" @keyup.enter.native="login()">
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="big" show-password placeholder="请输入密码"
                      v-model="user.password" @keyup.enter.native="login()">
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div style="display: flex">
              <el-input style="flex: 1" prefix-icon="el-icon-check" size="big" placeholder="请输入验证码"
                        v-model="user.code" @keyup.enter.native="login()">
              </el-input>
              <!-- 验证码生成组件 -->
              <div style="flex: 1; height: 40px; background-color: white; margin-left: 10px">
                <valid-code @update:value="getCode" ref="validCodeRef"/>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%; font-size: 17px" type="primary" @click="login"> 登 录</el-button>
          </el-form-item>
          <el-form-item>
            <div style="display: flex">
              <div style="flex: 1">还没有账号？请
                <span style="color: #0f9876; cursor: pointer;" @click="$router.push('/register')"> 注 册</span>
              </div>
              <div style="flex: 1; text-align: right">
                <span style="color: #0f9876; cursor: pointer;" @click="handleForgetPass">忘记密码</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 忘记密码的弹窗 -->
    <el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
      <el-form :model="forgetUserForm" label-width="80px" style="padding-right: 20px">
        <el-form-item label="用户名">
          <el-input v-model="forgetUserForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="forgetUserForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="forgetPassDialogVis = false">取 消</el-button>
        <el-button type="primary" @click="resetPassword">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
import ValidCode from "@/components/ValidCode.vue"; // 导入验证码组件

export default {
  name: "login", // 组件名称为 login

  components: {
    ValidCode, // 注册验证码组件
  },

  data() {
    // 验证码校验函数，用于表单验证规则中
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码')) // 如果没有输入验证码，提示错误
      } else if (value !== this.code) {
        callback(new Error('验证码错误')) // 如果输入的验证码不正确，提示错误
      } else {
        callback() // 验证通过
      }
    }

    return {
      code: '', // 存储接收到的验证码
      user: {username: '', password: ''}, // 存储用户输入的账号和密码
      rules: { // 表单验证规则
        username: [{required: true, message: '请输入账号', trigger: 'blur'}], // 账号必填
        password: [{required: true, message: '请输入密码', trigger: 'blur'}], // 密码必填
        code: [{validator: validateCode, trigger: 'blur'}], // 验证码校验规则
      },

      forgetUserForm: {}, // 存储忘记密码表单的数据
      forgetPassDialogVis: false, // 控制忘记密码弹窗的显示与隐藏
    }
  },

  methods: {

    // 获取验证码的方法，当验证码组件更新时调用
    getCode(code) {
      console.log(code) // 打印接收到的验证码
      this.code = code.toLowerCase() // 将验证码转换为小写并存储
    },

    // 登录方法，处理登录逻辑
    login() {
      this.$refs['loginRef'].validate((valid) => { // 验证表单数据
        if (valid) {
          // 如果表单数据有效，发送登录请求
          this.$request.post('/login', this.user).then(res => {
            if (res.code === '200') { // 如果登录成功
              this.$router.push('/home') // 跳转到主页
              this.$message.success('登陆成功') // 显示成功消息
              localStorage.setItem("honey-user", JSON.stringify(res.data)) // 将用户信息存储到本地存储
            } else {
              this.$message.error(res.msg) // 如果登录失败，显示错误消息
            }
          })
        } else {
          this.$refs.validCodeRef.refreshCode(); // 如果表单数据无效，刷新验证码
        }
      })
    },

    // 初始化忘记密码表单的数据
    handleForgetPass() {
      this.forgetUserForm = {} // 清空表单数据
      this.forgetPassDialogVis = true // 显示忘记密码弹窗
    },

    // 重置密码方法，处理重置密码逻辑
    resetPassword() {
      this.$request.put('/password', this.forgetUserForm).then(res => { // 发送重置密码请求
        if (res.code === '200') { // 如果重置成功
          this.$message.success('重置成功') // 显示成功消息
          this.forgetPassDialogVis = false // 隐藏忘记密码弹窗
        } else {
          this.$message.error(res.msg) // 如果重置失败，显示错误消息
        }
      })
    },
  }
}
</script>


<style>
/* 登陆表单毛玻璃 */
.login-container {
  height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;
  background: url('@/assets/bg/login.jpg') center/cover no-repeat;
  position: relative;
}
</style>